<template>
    <div>
         <!-- class="drag" v-drag -->
        <i-table class="drag" v-drag  border :content="self" :columns="columns7" :data="data6"></i-table>

        <div class="daima">
            <button @click="gohtml()"> 提交测试 </button>
            <div>
                <textarea v-model="textdama" cols="30" rows="10"></textarea>
                <div>
                    <!-- <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>
                    <style>
                    .nwad{
                    padding:50px;
                    }
                    </style>
                    <button class="nwad" onclick="displayDate()">点击这里</button>

                    <script>
                    function displayDate()
                    {
                    document.getElementById("demo").innerHTML=Date();
                    }
                    </script>

                    <p id="demo"></p> -->
            </div>
            </div>
            <div v-html="texthtml" class="texthtml"></div>
            <div>
            </div>
        </div>
    </div>
</template>
<script>
let removed,showd;
    export default {
        data () {
            return {
                self: this,
                columns7: [
                    {
                        title: '姓名',
                        key: 'name',
                        render (h, params) {
                            console.log(params);
                            // return h('div', 
                            //     params.row.name=="王小明"?"转王明": params.row.name=="张小刚"?"小刚":`<Icon type="person"></Icon> <strong>${params.row.name}</strong>`
                            // )
                            return h('div',[
                                h('Icon', {
                                    props: {
                                        type: 'person',
                                        size: 'small'
                                    },
                                },),
                                h('span', 
                                    params.row.name=="王小明"?"转王明": params.row.name=="张小刚"?"小刚":params.row.name
                                )
                            ])
                        }
                    },
                    {
                        title: '年龄',
                        key: 'age'
                    },
                    {
                        title: '地址',
                        key: 'address'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        // render (row, column, index) {
                        //     return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
                        // }
                        render: function (h, params) {
                            return h('p', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '8px'
                                    },
                                on: {
                                    click: () =>{
                                        showd(params.index)
                                    }
                                }
                        }, '查看'),
                        h('Button', {
                            props: {
                                type: 'error',
                                size: 'small'
                            },
                            on: {
                                click: function () {
                                removed()
                            }
                        }
                        }, '删除'),
                            ]);
                        }
                    }
                ],
                data6: [
                    {
                        name: '王小明',
                        age: 18,
                        address: '北京市朝阳区芍药居'
                    },
                    {
                        name: '张小刚',
                        age: 25,
                        address: '北京市海淀区西二旗'
                    },
                    {
                        name: '李小红',
                        age: 30,
                        address: '上海市浦东新区世纪大道'
                    },
                    {
                        name: '周小伟',
                        age: 26,
                        address: '深圳市南山区深南大道'
                    }
                ],
                textdama:"",
                texthtml:"<button>一个生动的按钮</button>",
            }
        },
        methods: {
            show (index) {
                this.$Modal.info({
                    title: '用户信息',
                    content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
                })
            },
            remove (index) {
                console.log("1")
                // this.data6.splice(index, 1);
                this.$router.push("/newpage1")
            },
            selffun(aa){
                console.log(aa)
            },
            gohtml(){
                // this.texthtml = "<p>这里是UE测试</p><p>圣盾</p>";
                this.texthtml = this.textdama;
                var ss = this.textdama.split('<script>')[1].split("script>")[0];
                ss =ss.substring(0,ss.length-2);
                console.log(ss);
                ss = JSON.parse(ss)
                console.log(ss)
                
                ss();
                // var elem = document.createElement('div')
                // var txt = document.createTextNode(html)
                // elem.appendChild(txt)
                // return elem.innerHTML;

            }
        },
        mounted(){
            removed = this.remove;
            showd = this.show;
        },
        directives:{
            drag(el,bindings){
                el.onmousedown = function(e){
                    console.log("onmousedown")
                    var disx = e.pageX - el.offsetLeft;
                    var disy = e.pageY - el.offsetTop;
                    var elementW = el.clientWidth/2;
                    var elementH = el.clientHeight/2;
                    document.onmousemove = function (e){
                        el.style.left = e.pageX - elementW+'px';
                        el.style.top = e.pageY - elementH+'px';
                    }
                    document.onmouseup = function(){
                        document.onmousemove = document.onmouseup = null;
                    }
                    // console.log(e);
                    // console.log(bindings);
                },
                el.onmouseup=function(e){
                    sessionStorage.setItem("pagebuttonx",el.style.left);
                    sessionStorage.setItem("pagebuttony",el.style.bottom);
                    // 为什么都没有呢
                    console.log(el.style)
                    console.log(el.style.left)
                    console.log(el.style.bottom)
                    // console.log(this)
                    var poview = $("#poview").position();
                    sessionStorage.setItem("pagebuttonx",poview.left);
                    sessionStorage.setItem("pagebuttony",poview.top);
                    console.log(poview);
                }
            }
        },
    }
</script>
<style scoped>
.drag{
    position: relative;
}
.texthtml{
    width:500px;
    height:500px;
    border: 1px solid #ddd;
}
</style>
